<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="pages"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ page isELIgnored="false"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>

	<!-- jQuery UI for the tabs -->
	<link type="text/css" href="jquery/ui/css/myTheme/jquery-ui-1.8.1.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.2.custom.min.js"></script>

	<!-- jQuery dataTables -->
	<script src="jquery/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="jquery/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	<link type="text/css" href="jquery/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />	

	<!-- jQuery History -->
	<script type="text/javascript" language="javascript" src="jquery/bbq/jquery.ba-bbq.min.js"></script>
	<link type="text/css" href="css/forms.css" rel="stylesheet" />	

	<script type="text/javascript">
		/**
		 * Refresh state object
		 */
		function refreshState() {
			console.log("%s: %o", "Refreshing state - showProject", this);
			var hashparam = jQuery.param.fragment()
			if(hashparam.length == 0) hashparam = "projectNumber=1";
			var params=jQuery.deparam(hashparam);

			jQuery.ajax({
				url: "project/jsonRefreshState?" + hashparam,
				async: false,
				datatype: "json",
				success: function(data) {
					//All object become expired
					expiredObjects = new Object();
					state = data;

					if(state.missing != true) {
						document.title = '<s:text name="title" /> - ' + state.projectName;
					} else {
						document.title = '<s:text name="title" /> - <s:text name="item.missing" />';
					} 
					
					//jQuery(document).trigger('expired');
					//jQuery("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").find(".expireHandler").trigger('expiredShow');
				} 
			});
		}
	
		jQuery(document).bind("documentInit",function() {
			/*
			 * Enable / disable tabs as in the state object	
			 */
			console.log("%s: %o", "Binding 'expired' to tabs - showProject", this);
			jQuery(document).bind('expired', function(){
				console.log("%s: %o", "Fired 'expired' to tabs - showProject", this);

				jQuery("#tabs").tabs("option","disabled",[]);
				if(state.disabledTabs != null) {
					jQuery("#tabs").tabs("select", state.activeTab);
					jQuery("#tabs").tabs("option","disabled",state.disabledTabs);
				}	
			});
			/*
			 * Remote div expire handler
			 */
			jQuery("div .expireHandler.remoteDiv").each(function(){
				console.log("%s: %o", "Binding 'expiredShow' to remotedivs - showProject", this);
				jQuery(this).bind('expiredShow', function() {
					console.log("%s: %o", "Fired 'expiredShow' to tabs - showProject", this);

					var expired = jQuery(expiredObjects).attr(this.id) == null ? true : false;
					if(!expired) return;
					jQuery(expiredObjects).attr(this.id,false);
					jQuery(this).slideUp('fast', function(){
						jQuery(this).load(jQuery(this).attr("href") + "?projectNumber=" + state.projectNumber, function() {
							jQuery(this).slideDown('fast');
						});
					});
				});
			});
			/*
			 *	Hash changed event
			 */
			console.log("%s: %o", "Binding 'hashModified' to document - showProject", this);
			jQuery(document).bind("hashModified", function(e) {
				console.log("%s: %o", "Fired 'hashModified' - showProject", this);
				refreshState();
				jQuery(document).trigger('expired');
				jQuery("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").find(".expireHandler").trigger('expiredShow');
			});
		});

		jQuery(document).bind('documentReady',function() {
			refreshState();

			/* 
			 * Create tabs
			 */
			console.log("%s: %o", "Creating tabs in showProject", this);
			jQuery('#tabs').tabs({
				show: function(event, ui) {
					console.log("%s: %o", "Triggering 'expired' to all .expireHandler on tab - showProject", this);
					jQuery(ui.panel).find(".expireHandler").trigger('expiredShow');
				},
				selected: state.activeTab,
				disabled: state.disabledTabs
			});
			jQuery(document).trigger('expired');
		});
		
	</script>	
</head>
<body>
	<div id="tabs">
		<ul>
			<li><a id="tab1" href="#tabDetails" class="tabLink"><s:text name="project.list.Details" >Részletek</s:text></a></li>
			<li><a id="tab2" href="#tabProjects" class="tabLink"><s:text name="project.list.Details" >Alprojektek</s:text></a></li>
			<li><a id="tab3" href="#tabHistory" class="tabLink"><s:text name="project.list.Details" >Események</s:text></a></li>
		</ul>
		<div id="tabDetails" >
			<div style="display: none" id="tabDetailsDiv" class="expireHandler remoteDiv" href="project/ajaxShowDetails">&nbsp;</div>
		</div>
		<div id="tabProjects">
			<jsp:include page="ajaxShowProjects.jsp" />
		</div>
		<div id="tabHistory">
			<div style="display: none" id="tabHistoryDiv" class="expireHandler remoteDiv" href="project/ajaxShowHistory">&nbsp;</div>
		</div>
		<div class="globalWrap">&nbsp;</div>
	</div>

</body>
</html>